/* 改变主题色变量 */
.theme-black{
  --color-primary: #2d8cf0;
  --color-primary-hover: #363e4f;
  --bg-color: #1e2121;
  --bg-hover-color: #0B0C0C;
  --text-color: #f5f7fa;
  --border-color: #363e4f;
  --border-color-light: #2a2a2a;
  --bg-color-secondary: #2a2a2a;
  --text-color-secondary: #909399;
  --danger-color: #f56c6c;

  .el-collapse-item__content, .el-form-item__label, .el-dropdown-menu__item, .el-dropdown, .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover{
    color: var(--text-color);
  }

  .el-dropdown-menu {
    background: var(--bg-color);
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
  }
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background-color: var(--bg-color-secondary);
  }
  /* Leaflet 控件样式覆盖 */
 .leaflet-bar {
    background: var(--bg-color);
    border-color: var(--border-color);
  }
  
  .leaflet-bar a {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-bottom-color: var(--border-color);
  }
  
  .leaflet-bar a:hover {
    background-color: var(--bg-hover-color);
    color: var(--text-color);
  }

  /* 弹框样式覆盖 */
  .el-dialog {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);

    .el-dialog__title {
      color: var(--text-color);
    }

    .el-dialog__header {
      background-color: var(--bg-color);
      border-bottom: 1px solid var(--border-color);
    }

    .el-dialog__body {
      color: var(--text-color);
      background-color: var(--bg-color);
    }

    .el-dialog__footer {
      background-color: var(--bg-color);
      border-top: 1px solid var(--border-color);
    }
  }

  /* 按钮样式覆盖 */
  .el-button--text {
    color: var(--text-color);
    &:hover {
      color: var(--color-primary);
    }
  }

  .el-button--primary.is-plain {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-primary);
    &:hover {
      background: var(--color-primary);
      color: var(--text-color);
    }
  }

  /* Checkbox样式覆盖 */
  .el-checkbox {
    .el-checkbox__label {
      color: var(--text-color);
    }
    .el-checkbox__inner {
      background-color: var(--bg-color-secondary);
      border-color: var(--border-color);
    }
  }

  /* 操作框样式覆盖 */
  .operation-box {
    background: var(--bg-color) !important;
    border: 1px solid var(--border-color);

    .operation-item {
      color: var(--text-color);

      &:hover {
        background-color: var(--color-primary-hover);
        color: var(--color-primary);
      }
    }
  }
}